<template>
  <div>
    <!-- 盒子将来echarts展示图形图标的节点 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { usetravelStore } from '../../../stores/travel'
let travelStore = usetravelStore()
onMounted(() => {
  setTimeout(() => {
    initmap();
  }, 500);
})
//获取节点
let charts = ref()
const initmap = () => {
  //获取echarts类的实例
  let mycharts = echarts.init(charts.value)
  mycharts.setOption({
    title: {
      text: 'TOP10推荐旅游景点',
      textStyle: {
        color: '#eee'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params: any) {

        // 使用模板字符串来拼接提示框的内容  
        let str = `  
      <div>点击可查看详细信息！</div>
      <div>${params.name} <br/>推荐评分：${params.value}</div>  
      <div>热门评论：${params.data.comment}</div>  
    `;
        return str;
      },
    },
    toolbox: {
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },


    series: [
      {
        name: 'Funnel',
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 60,
        width: '80%',
        min: 0,
        max: 10,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
          show: true,
          position: 'inside'
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 20
          }
        },
        data: travelStore.traveldata?.top10sight.slice(0, 10)
      }
    ]
  })

  mycharts.on('click', function (params:any) {
    window.open(params.data.link, '_blank'); // '_blank' 表示在新标签页中打开  


  });
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 350px;
  /* background-color: aliceblue; */
}
</style>
